import React, {useState} from 'react'
import {Form, Input, Button, DatePicker, Select} from 'antd';
//时间转换
import moment from 'moment';


//引入样式
import search from './search.module.scss'

function Index(props) {
    //查询方法
    let {onChangeTable} = props;
    let [value,setValue] = useState(""); //姓名/手机号/身份证号/订单号/
    let [selectValue, setSelectValue] = useState("5");
    // let initDate = moment(new Date()).format("YYYY-MM-DD");
    let [time,setTimeValue] = useState('');

    let getInputVal = (e)=>{
        setValue(e.target.value);
    }
    //下拉框切换
    let selectChange = (val) => {
        setSelectValue(val)
    };



    // 时间发生变化的回调，发生在用户选择时间时
    function onTimeChange(date, dateString) {

        let time = moment(dateString).valueOf();  //将2018-01-2 转换为时间戳
        setTimeValue(time);
    }

    //搜索
    function searchValue() {
        if(!value){
            value = ""
        }else if(!time){
            time=""
        }
        onChangeTable(value,selectValue,time)
    }


    return (
        <div>
            <Form
                className={search.antForm}
                name="basic"
                initialValues={{remember: true}}
            >
                <Form.Item label="输入查询：">
                    <Input placeholder="姓名/手机/身份证号/订单号" onChange={getInputVal} value={value} />
                </Form.Item>
                <Form.Item label="输入查询：">
                    <Select value={selectValue} onChange={selectChange}>
                        <Select.Option value="5">全部</Select.Option>
                        <Select.Option value="0">待体检</Select.Option>
                        <Select.Option value="1">待支付</Select.Option>
                        <Select.Option value="2">已体检</Select.Option>
                        <Select.Option value="3">已取消</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item label="体检日期：">
                    <DatePicker onChange={onTimeChange}/>
                </Form.Item>
                <Form.Item className={search.formBtn}>
                    <Button type="primary" className={search.searchBtn} onClick={searchValue}>查询</Button>
                    <Button>重置</Button>
                </Form.Item>
            </Form>
        </div>
    )
}

export default Index